<dom-module id="simple-life">
  <style>
    :host {
      position: relative;
      box-sizing: border-box;

      display: block;
      outline: none;

      border: 1px solid black;

      min-width: 200px;
      min-height: 200px;
    }

    .border {
      border: 1px solid #555;

      background-color: #474747;
    }

    .border .name {
      font-size: 12px;
      padding: 3px 10px;
      border-bottom: 1px solid #555;

      color: #aaa;
      background-color: #171717;
    }

    .border .content {
      position: relative;

      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      flex-direction: row;
    }

    .border .content:focus {
      outline: 1px solid #09f;
    }
  </style>

  <template>
    <div class="border layout vertical fit">
      <div class="name">{{name}}</div>
      <div id="content" class="content flex-1 self-stretch">
        <content/>
      </div>
    </div>
  </template>

  <script>
    Editor.polymerPanel({
      properties: {
        name: {
          type: String,
          value: 'Unknown',
        },
      },

      created () {
        Editor.log( '%s created', this.getAttribute('name') );
      },

      ready () {
        Editor.log( '%s ready', this.name );
      },

      factoryImpl ( name ) {
        this.name = name;
        Editor.log( '%s factoryImpl', this.name );
      },

      attached () {
        Editor.log( '%s attached', this.name );
      },
    });
  </script>
</dom-module>
